<template>
	<!-- 
		瀑布流横向实现flex
		备注：容器必须有固定高度且高度大于最高的列高  固定高度可以根据当前渲染内容自行计算
	 -->
	 <scroll-view :scroll-top="scrollTop" scroll-y="true" style="background-color: #f2f5fc;"  class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
	                @scroll="scroll">
	<view  class="container">
		
		<view class="left">
			<view  v-for="(item,index) in photoList" v-if="panduan(index)" @tap="jumpphotodetail(item.id)" class="item">
			<easy-loadimage view-height="100"  loadingMode="skeleton-2" :scroll-top="scrollTop" :image-src="item.imageurl" style="margin-bottom: 15upx;border-top-left-radius: 3upx;border-top-right-radius: 3upx;width: 346rpx;background-color: #FFFFFF;"  mode="widthFix"></easy-loadimage>
			
			<view class=""style="margin-left: 15upx;margin-right: 15upx;overflow: hidden;position: relative;height:auto;padding-bottom: 80upx;">
				<text>{{item.title}}</text>
				<text style="float: right; font-size: 25upx;font-weight: normal;margin-right: 10upx;color: #5e5e5e;">{{$u.timeFrom(item.datetime, true)}}</text>
				<view  style="width: 40upx;margin-top: 15upx; position: absolute;bottom: 20upx;" class="">
					<image :src="item.logourl" style="border-radius: 20upx;display: float;width: 30upx;margin-top: 5upx;" mode="widthFix"></image>
					
				</view>
				<view class=""style="width: auto;position: absolute;bottom: 20upx;left: 55upx;">
					<text style="font-weight: 500;color: #555555; font-size: 25upx;line-height: 40upx;">{{item.name}}</text>
				</view>
				
			</view>
		</view>
		</view>
		<view  class="right">
			<view v-for="(item,index) in photoList" v-if="panduan1(index)" @tap="jumpphotodetail(item.id)" class="item">
				<easy-loadimage  loadingMode="skeleton-2" :scroll-top="scrollTop" :image-src="item.imageurl" style="margin-bottom: 15upx;border-top-left-radius: 3upx;border-top-right-radius: 3upx;width: 346rpx;background-color: #FFFFFF;height: auto;"  mode="widthFix"></easy-loadimage>

				<view class=""style="margin-left: 15upx;margin-right: 15upx;overflow: hidden;position: relative;height:auto;padding-bottom: 80upx;">
					<text>{{item.title}}</text>
						<text style="float: right; font-size: 25upx;font-weight: normal;margin-right: 10upx;color: #5e5e5e;">{{$u.timeFrom(item.datetime, true)}}</text>
					<view  style="width: 40upx;margin-top: 15upx; position: absolute;bottom: 20upx;" class="">
						<image :src="item.logourl" style="border-radius: 20upx;display: float; width: 30upx;margin-top: 5upx;" mode="widthFix"></image>
						
					</view>
					<view class=""style="width: auto;position: absolute;bottom: 20upx;left: 55upx;">
						<text style="font-weight: 500;color: #555555; font-size: 25upx;line-height: 40upx;">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		 
		</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import http from '../../utils/http.js';
	export default {
		data() {
			return {
				photoList:[],
				time:null,
				load:false,
				imageurl:[],
				scrollTop:0
				//load1:false
			}
		},
		methods: {
			loadover:function(){
				this.load = true;
				//this.load1 = true;
			},
			 onPageScroll({scrollTop}) {
			            // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			            this.scrollTop = scrollTop;
			        },
			_previewImage:function(image){
				var imgArr = [];
								imgArr.push(image);
								//预览图片
								uni.previewImage({
									urls: imgArr,
									current: imgArr[0]
								});
			},
			panduan:function(index){
			if(index%2==0){
				return true;
			}else{
				return false;
			}
			},
			panduan1:function(index){
			if(index%2!=0){
				return true;
			}else{
				return false;
			}
			},
			jumpphotodetail:function(url){
				uni.navigateTo({
					url:"./photodetail?url="+url
				})
			},
			update:function(){
				var that = this;
				//that.imageurl = '../../static/loading.gif';
				http.showAllPhoto().then(list=>{
					console.log(list);					
					that.photoList = list.data;
					for(var i  = 0 ; i<that.photoList.length; i++){
						var time;
						time = that.photoList[i].datetime;
						time = time.replace("/Date("," ");
						time = time.substr(0,time.length-5);
						that.photoList[i].datetime = time;
						//that.imageurl[i]=that.photoList[i].imageurl;
					}
					console.log("修改后",that.photoList);
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
		.container {
		display: flex;
		  justify-content: space-between;
		  align-items: flex-start;
			margin-top: 40upx;
	}
	.left{
		 width: 346rpx;
		  box-sizing: border-box;
margin-left: 20upx;
	}
	.right{
		 width: 346rpx;
		  box-sizing: border-box;
		margin-right: 20upx;
	}
	.item {
		//width: 48%;
		overflow: auto;
		margin-bottom:20upx;
		border-radius: 3px;
		background-color: #ffffff;
		color: #000000;
		font-size: 30upx;
		font-weight: 500;
		box-sizing: border-box;
		position: relative;
		border: 1px solid #f3f3f3;
		overflow-x: hidden;
	//background-image: url(https://www.camwork.site/loading.gif);
		// -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
		// -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
		            
		// box-shadow:4px 4px 12px 
		//             -2px
		//              rgba(20%,20%,40%,0.5);
	}
	

	
	
</style>